<script setup lang="ts">
import { reactive, ref } from 'vue'
import { NCard, NForm, NFormItem, NInput, NButton, NSpace, useNotification, useDialog } from 'naive-ui'
import type { FormInst, FormRules, FormItemRule } from 'naive-ui'

import { useUserStore } from '@/stores/userStore'
import http from '@/tools/http'
import cipher from '@/tools/cipher'

const notification = useNotification()
const dialog = useDialog()
const userStore = useUserStore()

type FromData = {
    oldPassword: string
    newPassword: string
    newPasswordConfirm: string
}

const formRef = ref<FormInst | null>(null)
const formData = reactive<FromData>({
    oldPassword: "",
    newPassword: "",
    newPasswordConfirm: ""
})

const formRules: FormRules = ({
    oldPassword: {
        required: true,
        message: '请输入旧密码',
        trigger: ['input']
    },
    newPassword: {
        required: true,
        message: '请输入新密码',
        trigger: ['input']
    },
    newPasswordConfirm: {
        required: true,
        trigger: ['input'],
        validator: (rule: FormItemRule, value: string): boolean | Error => {
            if (!value || value === "") {
                return new Error("请再次输入新密码")
            }
            if (formData.newPassword !== value) {
                return new Error("两次输入的密码不相同，请重新输入")
            }
            return true
        }
    }
})

function submit() {
    formRef.value?.validate((errors) => {
        if (!errors) {
            dialog.create({
                title: '温馨提示',
                content: '确定修改密码吗？',
                positiveText: '确定',
                negativeText: '取消',
                onPositiveClick: () => {
                    const request = {
                        account: userStore.account,
                        oldPassword: cipher.sm2Encrypt(formData.oldPassword),
                        newPassword: cipher.sm2Encrypt(formData.newPassword)
                    }
                    http.post("/user/account/pwd/update", request).then(({ data }) => {
                        if (data.code === "0") {
                            notification['success']({
                                content: '修改成功',
                                meta: `${data.msg}`,
                                duration: 2500,
                                keepAliveOnHover: true
                            })
                        }
                    })
                }
            })
        }
    })
}
</script>

<template>
    <div class="flame-container">
        <n-card title="修改密码" :content-style="{ overflowY: 'auto' }" :bordered="false">
            <n-form ref="formRef" :model="formData" :rules="formRules" label-width="116px" label-placement="left"
                require-mark-placement="left">
                <n-form-item :span="1" label="旧密码" path="oldPassword">
                    <n-input type="password" v-model:value="formData.oldPassword" placeholder="请输入旧密码" clearable />
                </n-form-item>
                <n-form-item :span="1" label="新密码" path="newPassword">
                    <n-input type="password" v-model:value="formData.newPassword" placeholder="请输入新密码" clearable />
                </n-form-item>
                <n-form-item :span="1" label="确认新密码" path="newPasswordConfirm">
                    <n-input type="password" v-model:value="formData.newPasswordConfirm" placeholder="请再次输入新密码"
                        clearable />
                </n-form-item>
            </n-form>
            <template #footer>
                <n-space justify="end">
                    <n-button @click="submit">保存</n-button>
                </n-space>
            </template>
        </n-card>
    </div>
</template>

<style scoped>
</style>